<template>
  <div class="">
    <span>获取验证码({{ time }}s)</span>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
let props = defineProps(["flag"]);
let $emit = defineEmits(["getFlag"]);
let time = ref<number>(5);
watch(
  () => props.flag,
  () => {
    let timer = setInterval(() => {
      time.value--;
      if (time.value === 0) {
        // 通知父组件倒计时模式结束
        $emit("getFlag", false);
        // 清除计时器
        clearInterval(timer);
      }
    }, 1000);
  },
  { immediate: true }
);
</script>

<style scoped></style>
